<template>
  <div class="Station">
    <el-row :gutter="3" class="top">
      <el-col :span="5">
        <el-form-item label="搜索 ">
          <el-input
            v-model="val"
            placeholder="车站"
            @change="
              () => {
                getlist();
              }
            "
          />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="状态 ">
          <el-select
            v-model="state"
            class="m-2"
            placeholder="Select"
            size="default"
            @change="
              () => {
                getlist();
              }
            "
          >
            <el-option
              v-for="item in options1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <!-- -->
        <el-form-item label=" ">
          字母 &emsp;
          <el-button @click="Sort('a')" size="small"> A->Z </el-button>
          <el-button @click="Sort('b')" size="small"> Z->A </el-button>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="字母查询">
          <el-select
            v-model="a"
            class="m-2"
            placeholder="Select"
            size="default"
            @change="
              () => {
                Sort1(a);
              }
            "
          >
            <el-option
              v-for="item in all"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <Table :tableData="list" @getlist="getlist" :val="val" />
    <!-- 分页 -->
    <Page
      :pageCode="pageCode"
      :pageSize="pageSize"
      :total="total"
      @getlist="getlist"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog v-model="dialogFormVisible" class="form" title="添加车站">
      <el-form-item label="">
        <a style="fontsize: 20px"> 车站 </a>
        <el-input
          v-model="city"
          placeholder="请输入添加车站"
          :style="{ height: '50px' }"
        />
      </el-form-item>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="() => addStation()">添加</el-button>
          <el-button
            type="primary"
            @click="
              () => {
                dialogFormVisible = false;
              }
            "
          >
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { HttpList, AddStation } from "api";
import Table from "../Station/components/Table.vue";
import Page from "../../components/Page.vue";
import { ElMessage } from "element-plus";
import pinyin from "js-pinyin";
pinyin.setOptions({ charCase: 1 })
export default {
  components: {
    Table,
    Page,
  },
  data() {
    return {
      list: [],
      city: "",
      dialogFormVisible: true,
      a: "A",
      all: ["A", "B", "C", "D"],
      options: ["全部", "株洲市", "重庆市", "银川市"],
      options1: ["全部", "启用", "停用"],
      pageCode: 7,
      pageSize: 1,
      type: "全部",
      total: 1,
      val: "",
      state: "全部",
    };
  },
  methods: {
    async getlist() {
      const form = {
        val: this.val,
        pageSize: this.pageSize,
        pageCode: this.pageCode,
        type: this.type,
        state: this.state,
        date: "",
        date1: "",
      };
      const res = await HttpList({
        ...form,
      });
      this.list = res.data.data;
      this.total = res.data.total;
    },
    Sort(w) {
      console.log(w, this.a);
      if (w === "a") {
        const arr = this.list.sort((a, b) => {
          return a.city.localeCompare(b.city, "zh");
        });
      } else {
        const arr = this.list.sort((a, b) => {
          return b.city.localeCompare(a.city, "zh");
        });
        console.log(arr, "11");
      }
    },
    Sort1(e) {
      console.log(e);
      let arr = this.list.filter((v) => {
        return pinyin.getFullChars(v.city).includes(e);
      });
      console.log(arr, e);
    },
    handleSizeChange(e) {
      this.pageCode = e;
      this.getlist();
    },
    handleCurrentChange(e) {
      this.pageSize = e;
      this.getlist();
    },
    async addStation() {
      const res = await AddStation({ city: this.city });
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
      this.dialogFormVisible = false;
      this.getlist();
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>
<style scoped lang='scss'>
.top {
  margin-top: 20px;
  line-height: 40px;
  margin-bottom: 10px;
  a {
    float: left;
    padding-right: 5px;
  }
  .el-input,
  .el-select {
    width: 90%;
    height: 40px;
  }
}
.Station {
  background-color: white;
  border-radius: 7px;
  margin: 0px auto;
  padding: 5px;
}
.form {
  font-size: 30px;
}
</style>
 